import { computed } from 'vue'

export function usePageBackground(type = 'home') {
  // 定义不同页面的背景图片
  const backgrounds = {
    home: 'https://pics7.baidu.com/feed/72f082025aafa40fde0c64eea164034879f01957.jpeg',
    about: 'https://pics6.baidu.com/feed/91529822720e0cf3c5d3cd22cfe0876ff21fab47.jpeg',
    services: 'https://pics4.baidu.com/feed/6a63f6246b600c33d2c05436ac4b4d3fd4ca6f2e.jpeg',
    projects: 'https://pics7.baidu.com/feed/b8014a90f603738d1a91cd1c6f1a4c02f919ec58.jpeg',
    contact: 'https://pics4.baidu.com/feed/b3119313b07eca80dd0eb17e8c906b4e4b90eb89.jpeg',
    team: 'https://pics6.baidu.com/feed/91529822720e0cf3c5d3cd22cfe0876ff21fab47.jpeg'
  }

  const backgroundStyle = computed(() => ({
    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${backgrounds[type] || backgrounds.home})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundAttachment: 'fixed'
  }))

  return {
    backgroundStyle
  }
}
